<template>
    <div class="btn-wrapper" @click="btnClick">
        <text class="btn-txt">
            <slot></slot>
        </text>

        <image resize="cover" class="arrow-img" :src="rightArrowImg"></image>
    </div>
</template>

<style scoped>
    .btn-wrapper {
        height: 42px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-left: 12px;
    }
    .btn-txt {
        font-size: 26px;
        color: #313131;
        font-family: msyhl;
    }
    .arrow-img {
        width: 36px;
        height: 36px;
        margin-left: 4px;
    }
</style>

<script>
    import rightArrowImg from 'assets/images/right-arrow.png';
    export default{
        data(){
            return{
                rightArrowImg: rightArrowImg
            }
        },
        methods: {
            btnClick(e){
                this.$emit("btnClick",e);
            }
        }
    }
</script>
